/**
 * 时间：2021-06-08
 * 作者：韩万路
 * 公司：中亿丰信息
 * 名称：svg中的表模块
 * 功能：主要是主要模块的组件
 * 优先级:高
 * 目录: 1 .space_component_mode 主要显示内容
 *       2 .space_component_mode_properties   显示的配置设置用于设置当前的属性
 * 
 * 
 */


 Vue.component("space_component_mode", {
    data() {
        return {
            id: this.toUuid,
            uuid: this.toUuid, //动态数字名称

            name: "space_component_mode", //当前的名称是模块的名称

            parentName: "", //当前父级模块名称

            childrenNodeArray: [], //当前子集的name数组

            parentNode: null, //当前父级的node节点创建时必须有node




            data: {
                
                btnRight:true,//当前左右按钮点击
                btnLeft:true,



                childrenListId:[],
                position: {
                    x: 0,
                    y: 0,
                },
                innerSize: {
                    width: 210,
                    height: 95,  //95    115   /140
                },
                parentId: "",

                name: "model类型",
                explain:"model模型说明",
                indent:"model订单",
                remark:"备注",
                propertys:[
                    {
                        name_cn:"瞬态模型",
                        name_en:"transient_model",
                    }
                ],


            },


            data_on_childrenShrinkage: true, //当前的子集是否隐藏  true 是不隐藏

        }
    },
//     <text   text-rendering="inherit" dominant-baseline="text-before-edge"
//     :font-size="data.font_size" :y="10"  :x="data.font_size" 
//     :w="computed_textWidth"
//  >
//     文本域{data.text}!
// </text>


    template: `
        <g 
            :id="computed_toUuid" 
            class="movetrue" 
            :class="name"
            :transform="'matrix( 1 0 0 1 '+ (data.position.x)  +' '+ (data.position.y) +' )'"
            style="z-index:999"
        >
            <rect 
                class="fil2 str2" 
                x="0" 
                y="0" 
                :width="computed_textWidth" 
                :height="computed_height" 
                rx="6" 
                ry="6"  
                stroke="rgba(57, 80, 96,0)" 
                stroke-width="3" 
                fill="#ffffff" 
                filter="url(#dropshadow)" 
                >

            </rect>    

            <foreignObject 
                :x="-30 - 5" 
                :y="0" 
                :width="computed_textWidth + 30*2 + 5*2" 
                :height="computed_height" 
                style="position:absolute"
                class="foreignObject"
            >
                <!--主要内容-->
                <div class="foreignObject-header">
                    <div class="foreignObject-icon logo-icon-table"></div>
                    <div class="foreignObject-name"
                        style="
                            
                        "
                    >文本域{data.name}!</div>
                    <button 
                        class="btn-add  btn-icon-jurisdictionadd"
                        v-on:click="fun_on_createChildren('space_component_safety')"
                    ></button>
                    <button 
                        class="btn-add  btn-icon-fieldadd"
                        v-on:click="fun_on_createChildren('space_component_field')"
                    ></button>
                </div>
                <!--扩展解释-->
                <div class="foreignObject-items">
                    <span>说明:文本域{data.explain}!</span>
                    <span>订单:文本域{data.indent}!</span>

                    <span class="foreignObject-tags">
                        <span class="foreignObject-tag" v-for="(item , index) in data.propertys" :name="item.name_en" >文本域{item.name_cn}!</span>
                    </span>
                </div>
                <!--左右按钮-->
                <div class="">
                    <!--<button class="btn-add  btn-icon-link-left" :style="{transform:data.btnLeft?'rotateY(180deg)':'rotateY(0deg)'}"   v-on:click="fun_on_childrenShrinkage(false)"></button>-->
                    
                    <button class="btn-add  btn-icon-link-right" :style="{transform:data.btnRight?'rotateY(180deg)':'rotateY(0deg)'}"   v-on:click="fun_on_childrenShrinkage(true)"></button>
                </div>
              
            </foreignObject>

           


        </g>
    `,
    props: ["toUuid","modelType"],
    computed: {
        /**
         * 计算属性  : 计算当前宽度多少
         * @returns 
         */
        computed_textWidth: function() {
            return this.data.innerSize.width;
        },
        computed_toUuid: function() {

            this.fun_thisToChildren();
            return this.toUuid;
        },
        /**
         * 
         * @returns 
         */
        computed_childrenLength: function() {

            return Object.keys(this.childrenNodeArray).length;
        },
        /**
         * 计算height高度的内容
         */
        computed_height:function()
        {
            let height  = 95;
            height = height + (      Math.ceil(this.data.propertys.length/2)*25      );
            //console.log("-------------------",Math.ceil(this.data.propertys.length/2)*20            );
            //同步下数字

            this.data.innerSize.height = height;

            return height;
        }
    },
    methods: {


        /**
         * 获取数据
         */
        fun_getData() {
            return this.data;
        },
        /**
         * 插入数据 覆盖
         */
        fun_setData(data) {
            let newData = {...this.data,...data};
            this.data = newData;

        },
        /**
         * 初始化创建的时候获取main里面的server和app里面的值并且传入到当前
         */
        fun_initGetMainData:function(){
            //获取创建时的内存地址
            let mainData = main.requestData[this.modelType][this.id].data;
            //吧获取的数据同步到当前
            this.fun_setData(mainData);
            //吧同步后的数据发送到main里面
            this.$set(
                main.requestData[this.modelType][this.id],
                "data",
                this.fun_getData()
            );

            
            //注册当前到parent
            this.fun_registerToParent();

            //初始化完毕更新线段
            main.fun_component_updateLink();

        },

        /**
         * 发送当前的this到外部
         */
        fun_thisToChildren: function() {
            // this.$emit('increase', this);
        },
        /**
         * 点击执行children收缩
         */
        fun_on_childrenShrinkage: function(isRight) {
            if(isRight)
            {
                this.data.btnRight = !this.data.btnRight;
            }else
            {
                this.data.btnLeft = !this.data.btnLeft;
            }
        },
        /**
         * 创建内容
         */
        fun_on_createChildren(craeteComponentName)
        {   
            main.fun_component_addChildren(this.id,craeteComponentName);
        },
        /**
         * 获取所有子集的x和y列表
         */
        fun_get_childrenAllPosition:function()
        {

            let childrenAllData  = [];
            let childrenAllPosition = [];

            for (let i = 0; i < this.data.childrenListId.length; i++) {
                let childrenId = this.data.childrenListId[i];

                childrenAllData.push(
                    main.requestData[main.requestData.modelType][childrenId].data
                );
                // console.log(childrenId);
                childrenAllPosition.push(
                    main.requestData[main.requestData.modelType][childrenId].data.position
                );
                
            }

            return{
                childrenAllData:childrenAllPosition,
                childrenAllPosition:childrenAllPosition,
            }

        },
        fun_registerToParent:function(){
            
            //吧当前的id传入到父级里面
            //获取父级的数据
            let parentData = main.requestData[main.requestData.modelType][this.data.parentId].data;
            //判断当前父级是否有相同的内容否则不予添加
            let index = parentData.childrenListId.indexOf(this.id);
            if(index == -1)
            {
                parentData.childrenListId.push(this.id);
            }

        }



    },
    //监听xy的移动位置
    watch:{
        'data.position.x':function(newVal,oldVal)
        {
            let cha = (newVal - oldVal);
            //console.log("---------------",newVal - oldVal);
            // return;
            // 当前鼠标按下才可执行当前内容
            if(main.mouse_isDown)
            {
                 //获取当前所有子集的x;
                let {childrenAllPosition} = this.fun_get_childrenAllPosition();
                for (let i = 0; i < childrenAllPosition.length; i++) {
                    const itemPosition = childrenAllPosition[i];
                    
                    itemPosition.x  = itemPosition.x + cha ;
                    
                }

            }
           
        },
        'data.position.y':function(newVal,oldVal)
        {
            // console.log(newVal - oldVal);
            // 当前鼠标按下才可执行当前内容
            // return;
            if(main.mouse_isDown)
            {
                let cha = (newVal - oldVal);
                //获取当前所有子集的x;
                let {childrenAllPosition} = this.fun_get_childrenAllPosition();
                for (let i = 0; i < childrenAllPosition.length; i++) {
                    const itemPosition = childrenAllPosition[i];

                    itemPosition.y  = itemPosition.y + cha ;
                    // itemPosition
                }
            }
        }
    },
    created() {
        //创建完毕后插入到当前对象
        this.fun_initGetMainData();


    }

});



/**
 *  当前模块的属性设置
 *  space_component_mode_properties
 */

Vue.component("space_component_mode_properties",{
    props:[
        "thisObject"
    ],
    data:function(){
        return{
            data:{
                propertys:[
                    {  
                        checked:false,
                        name_cn:"瞬态模型",
                        name_en:"transient_model",
                    },
                    {
                        checked:false,
                        name_cn:"邮件线程",
                        name_en:"transient_model",
                    },
                    {
                        checked:false,
                        name_cn:"邮件活动",
                        name_en:"transient_model",
                    },
                    {
                        checked:false,
                        name_cn:"邮件黑名单",
                        name_en:"transient_model",
                    }
                ],
            }
        }
    },
    template:`
    <div class="properties-group" >
        <p class="properties-content properties-weight"><span>[模型]特有属性</span></p>
        <p class="properties-content">
            <span>名称</span>
            <input type="text" placeholder="修改模型名称" v-model="thisObject.data.name" />
        </p>
        <p class="properties-content">
            <span>说明</span>
            <input type="text"  v-model="thisObject.data.explain"    placeholder="请输入模型标签" />
        </p>
        <p class="properties-content">
            <span>订单</span>
            <input type="text"  v-model="thisObject.data.indent"    placeholder="模型的订单" />
        </p>
        
        <p class="properties-content properties-weight"><span>标签</span></p>


        <p class="properties-content" v-for="(item , index) in data.propertys">
            <span>文本域{item.name_cn}!</span>
            <input type="checkbox"  v-on:click="btn_tagChecket(index)" :checked="item.checked"    />
        </p>


        <p class="properties-content properties-weight"><span>备注</span></p>
        <p class="properties-content">

            <input type="text"   v-model="thisObject.data.remark"  placeholder="备注说明" />
        </p>

      
    </div>
    `,
    methods:{
        btn_tagChecket:function(index)
        {

            this.data.propertys[index].checked = !this.data.propertys[index].checked ;


            let propertys = [];

            //获取所有属性内容
            for (let i = 0; i < this.data.propertys.length; i++) {
                let property = this.data.propertys[i];
                
                if(property.checked)
                {
                    propertys.push({
                        name_cn:property.name_cn,
                        name_en:property.name_en,
                    });
                }

            }
            //console.log("!--------------------------------------------------");

            this.thisObject.data.propertys = propertys;
        }
    },
    created()
    {
        //初始化时获取当前的对象并判断是否有选中的标签
        for (let i = 0; i < this.thisObject.data.propertys.length; i++) {

            let property = this.thisObject.data.propertys[i];
            
            for (let j = 0; j < this.data.propertys.length; j++) {
                let thisProperty = this.data.propertys[j];
                if(property.name_cn == thisProperty.name_cn )
                {
                    thisProperty.checked = true;
                }
            }
            

        }
        
    },


});